<template>
	<uni-segmented-control :current="segmented.current" :values="segmented.items" @clickItem="onClickItem" styleType="text" activeColor="#24C789" style="background-color: #fff;position: fixed;top: 0;width: 100%;"></uni-segmented-control>
	<view class="container">
		<!-- <view class="list-tip-text" v-if="useDataResult.dataList.length != 0">{{ useDataResult.listTipText }}</view>
		<gzListNull :list="useDataResult.dataList"></gzListNull> -->
		<view class="list">
			<view class="item" v-for="item in useDataResult.dataList">
				<view class="top">
					<image class="avatar" src="@/static/new/user/default-head.png" mode=""></image>
					<view class="desc">
						<view class="title">屈臣氏（浦西万达店）</view>
						<view class="addr">
							<image src="@/static/new/user/icon-location.png"></image>
							<text>泉州市鲤城区江滨南路25佛挡杀佛打撒分手的方式阿迪</text>
						</view>
					</view>
					<view class="btn">
						<image src="@/static/new/user/collected.png"></image>
						<text>取消</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="bottom">
					<view class="btn">
						导航
					</view>
					<view v-if="segmented.current === 1" class="btn">
						查看商户名单
					</view>
					<view class="btn">
						查看当前活动
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive,ref } from 'vue';
import useGetList from '@/hooks/useGetList.js';
import gzListNull from '@/components/gzListNull/gzListNull.vue'; //空数据组件
import tool from '@/util/tool.js';
import noPic from "@/static/user/noPic.png"

const segmented = reactive({
	current: 0,
	items: ['商户', '商圈'],
})
function onClickItem(e){
	segmented.current = e.currentIndex
}
let data = reactive({
	avatar: noPic
});

const useDataResult = {
	dataList: [
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
		{ mchName: '佛挡杀佛', address: '发个打撒发多少' },
	],
	listTipText: '暂无更多'
}

function viewInfo(e){
	uni.navigateTo({
		url: '../../pageUser/myCollect/viewInfo?info='+JSON.stringify(e)
	});
};

</script>
<style lang="less">
.container{
	background: #F7F8FB;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	padding: 100rpx 32rpx 24rpx;
	box-sizing: border-box;
	
	.list{
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		.item{
			border-radius: 24rpx;
			padding: 36rpx 28rpx 20rpx;
			background-color: #fff;
			.top{
				display: flex;
				align-items: center;
				.avatar{
					width: 92rpx;
					height: 92rpx;
					border-radius: 16rpx;
					flex-shrink: 0;
				}
				
				.desc{
					width: calc(100% - 223rpx);
					padding: 0 22rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					
					
					.title{
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.addr{
						display: flex;
						align-items: center;
						gap: 10rpx;
						image{
							width: 24rpx;
							height: 26rpx;
							flex-shrink: 0;
						}
						text{
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							display: inline-block;
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							
						}
					}
				}
				
				.btn{
					flex-shrink: 0;
					width: 132rpx;
					height: 56rpx;
					border-radius: 34rpx;
					background: #F7F8FB;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10rpx;
					
					image{
						width: 26rpx;
						height: 24rpx;
					}
					text{
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
			
			.line{
				width: 100%;
				height: 2rpx;
				background-color: #E6E6E6;
				margin: 36rpx 0 18rpx 0;
			}
			
			.bottom{
				display: flex;
				gap: 24rpx;
				justify-content: flex-end;
				
				.btn{
					padding: 16rpx 32rpx;
					border-radius: 34rpx;
					border: 1rpx solid #B4B4B4;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}
}
</style>
